import React, {Component} from 'react'
class Demo extends Component {
  render() {
    throw Error('Demo组件出现异常')
    return <h1>Demo组件</h1>
  }
}

class ErrorBoundary extends Component {
  state = {
    hasError: false
  }
  static getDerivedStateFromError() {
    return {
      hasError: true
    }
  }
  componentDidCatch(error, errorInfo) {
    console.log(error, errorInfo)
  }
  render() {
    if(this.state.hasError) {
      return <h1>页面出错，暂时无法显示~</h1>
    } else {
      return this.props.children
    }
  }
}

export default class App extends Component {
  render() {
    return (
      <div>
        <ErrorBoundary>
          <Demo></Demo>
        </ErrorBoundary>
      </div>
    )
  }
} 